<template>
	<view class="unpay_box">
	    <view class="topMessage">
	        <text>{{orderState}}</text>
	    </view>
	
	    <!-- 1.收货地址 -->
	    <view class="location card w" v-show="addressFlag">
	        <view class="infoItem  entry2 dpflxr">
	            <text class="iTitle">收货地址</text>
	            <view class="iContent dpflxr"></view>
	        </view>
	        <text class="neme">{{nickname}}</text>
	        <text>{{address_tel}}</text>
	        <text class="detailLocation">{{address_detail}}</text>
	    </view>
	
	    <!-- 2.商品列表 -->
	    <view class="itemList w card">
	        <view class="cb_item   dpflxr" v-for="(item,index) in goodsList" :key="item.id" @click="">
	
	            <view class="img">
	                <image :src="getImgUrl(item.goodsDTO.coverFile.filePath)" mode="aspectFill"></image>
	            </view>
	            <view class="words">
	                <view class="title">{{item.goodsDTO.productName}}</view>
					<view v-if="item.goodsDTO.category==null">
						<text class="label">暂无</text>
					</view>
	                <view v-else>
	                	<text class="label">{{item.goodsDTO.category.categoryName}}</text>
	                </view>
	                <view class="wFoot dpflxr">
	                    <view class="price dpflxr">￥<text class="num">{{item.buyPrice}}</text></view>
	                    <view class="changeAmount dpflxr">
	                        <text>{{"x"+item.num}}</text>
	
	                    </view>
	                </view>
	            </view>
	        </view>
	       <!-- <view class="cb_item   dpflxr">
	
	            <view class="img">
	                <image src="https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/img_bg.jpg" mode="aspectFill"></image>
	            </view>
	            <view class="words">
	                <view class="title">Engohn 英格翰婴儿学饮牛奶杯</view>
	                <text class="label">象牙白，大型号</text>
	                <view class="wFoot dpflxr">
	                    <veiw class="price dpflxr">￥<text class="num">88.00</text></veiw>
	                    <view class="changeAmount dpflxr">
	                        <text>x1</text>
	                    </view>
	                </view>
	            </view>
	        </view> -->
	
	    </view>
	
	
	    <!-- 3.配送支付 -->
	    <view class="deliveryPay w card">
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">订单编号</text>
	            <text class="iContent">{{orderNum}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">下单时间</text>
	            <text class="iContent">{{orderTime}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
				<text class="iTitle">配送方式</text>
				<text class="iContent">{{expressType}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
				<text class="iTitle">运费</text>
				<text class="iContent">{{freight}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">支付方式</text>
	            <text class="iContent">{{payType}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">商品总额</text>
	            <text class="iContent">{{goodsTol}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">优惠券</text>
	            <text class="iContent minus">{{coupon}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">积分抵扣</text>
	            <text class="iContent minus">{{integral}}</text>
	        </view>
	        <view class="infoItem wp present dpflxr last">
	            <text class="iTitle">收益抵扣</text>
	            <text class="iContent minus">{{profit}}</text>
	        </view>
	        <view class="infoItem w present pay dpflxr last">
	            <text class="iTitle">订单总额</text>
	
	            <view class="iContent price dpflxr">￥<text class="num">{{orderTol}}</text></view>
				
			
	        </view>
			<view >
			    <button size="mini" class="btn"  @click="scan" v-show="!flag">订单核销</button>
			</view>
	    </view>
	
		
	</view>
</template>


<script>
	import request from "@/api/index.js";
    import configs from "@/config/common.js";
	import permision from "@/config/permission.js"
	
	export default {
		data() {
			return {
				id:'',
				nickname:'',
				address_tel:'',
				address_detail:'',
				goodsList:[],
				orderNum:'',
				orderTime:'',
				expressType:'',
				freight:'',
				payType:'微信',
				goodsTol:'',
				coupon:'',
				integral:'',
				profit:'',
				orderTol:'',
				orderState:'',
				result:'',
				flag:true,
				addressFlag:true
			}
		},
		onLoad(option){
			this.id = option.id;
		   this.getDetail(option.id);
		   // this.doWriteOff('QO20210730737303','NCJBRNHB21073')
		},
		methods: {
			getDetail(id){
				request.http('/shop/store-api/frontOrderform/'+uni.getStorageSync('shop_id')+'/goods/'+id, 'PUT').then(res => {
					console.log(res);
					if(res.data.code==0){
						if(res.data.data.receivingWay=="EXPRESS"){
							this.addressFlag = true;
							if(res.data.data.address){
								this.nickname = res.data.data.address.name
								this.address_tel = res.data.data.address.mobile
								this.address_detail = res.data.data.address.title
							}
						}else{
							this.addressFlag = false;
						}
						this.goodsList = res.data.data.orderFormItems
						this.orderNum = res.data.data.orderSn
						this.orderTime = res.data.data.pushTime
						this.expressType = this.receivingWay(res.data.data.receivingWay)
						this.freight = this.isHaveFreight(res.data.data.transferFee)  
						// this.payType = res.data.data.receivingWay
						this.goodsTol = res.data.data.realAmount
						this.coupon = res.data.data.couponId
						this.integral = res.data.data.couponId
						this.profit = res.data.data.couponId
						this.orderTol = res.data.data.realAmount
						this.orderState = this.doStatus(res.data.data.status)
			
						if(this.orderState=="待自提"){
							console.log("展示按钮");
							this.flag = false
						}
						
					}
				})
			},
			doWriteOff(orderSn,valid_Code){
				uni.showLoading({
					title:'正在加载...'
				})
				uni.request({
					url: configs.myBaseUrl+'/shop/store-api/frontOrderform/'+uni.getStorageSync('shop_id')+'/'+orderSn+'/writeOff',
					method:'PUT',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('authorization')
					},
					data:{
						validCode: valid_Code
					},
					success: (res) => {
						console.log(res);
						if(res.data.code==0){
							setTimeout(function () {
							    uni.hideLoading();
							}, 500);
							uni.showToast({
								title:'核销成功'
							})
							 this.getDetail(this.id);
						}else{
							uni.showToast({
								title:res.data.msg
							})
						}
					}
					
				})
			},
			doStatus(str){
				 switch (str) {
					case 'WAITING_PAY':
						return "待支付";
					case "WAITING_DELIVERY":
						return "待发货";
					case "WAITING_COMMENT":
						return "待评论";
					case "FAILURE":
					case "CANCEL":
						return "取消/失败";
					case "FINISHED":
						return "完成";
					case "WAITING_PICK_UP":
						return "待自提";
					case "WAITING_RECEIVE":
						return "待收货";
				}
			},
			receivingWay(str) {
				switch (str) {
					case 'MANUAL':
						return "自提";
					case "EXPRESS":
						return "快递";
					case "WDT":
						return "旺店通";
				}
			},
			isHaveFreight(str){
				if(!str){
					return "免运费";
				}else{
					return str;
				}
			},
			getImgUrl(image){
			   return configs.myBaseUrl+image;
			},
			async scan() {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
				    return;
				}
				// #endif
				uni.scanCode({
					success: (res) => {
						this.result = res.result
						this.doWriteOff(this.orderNum,this.result)
					},
					fail: (err) => {
						// 需要注意的是小程序扫码不需要申请相机权限
						uni.showToast({
							title:'扫码失败,或取消',
							icon:"none"
						})
					}
				});
			},
			async checkPermission(code) {
				let status = permision.isIOS ? await permision.requestIOS('camera') :
					await permision.requestAndroid('android.permission.CAMERA');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "需要相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
		}
		
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page{
	    padding-bottom: 20rpx;
	}
	.topMessage{
	    font-size: 28rpx;
	    width: 100%;
	    line-height: 100rpx;
	    background-color: #fe6903;
	    color: #fff;
	    text-align: center;
	    height: 100rpx;
	}
	.card{
	    border-radius: 20rpx;
	    box-shadow: 0px 0px 16rpx 0px #EEEEEE;
	}
	.location{
	    box-sizing: border-box;
	    padding: 0 30rpx;
	    font-size: 28rpx;
	    line-height: 28rpx;
	}
	.location .infoItem{
	    height: 111rpx;
	    font-size: 32rpx;
	    line-height: 32rpx;
	    border-bottom: none;
	}
	.location .neme{
	    margin-right: 40rpx;
	}
	.location .detailLocation{
	    width: 100%;
	   margin-top: 22rpx;
	   font-size: 24rpx;
	   line-height: 24rpx;
	   color: #999;
	   margin-bottom: 40rpx;
	}
	
	/*   <!-- 2.商品列表 --> */
	.itemList{
	    padding-top: 30rpx;
	}
	.cb_item{
	    box-sizing: border-box;
	    padding: 0rpx 30rpx 30rpx 30rpx;
	    justify-content: space-between;
	}
	.cb_item .img{
	    width: 200rpx;
	    height: 160rpx;
	    border-radius: 12rpx;
	    margin-right:20rpx;
	    overflow: hidden;
	}
	.cb_item .words{
	    width: calc(100% - 230rpx);
	    height: 160rpx;
	}
	.cb_item .words .title{
	    font-size: 28rpx;
	    line-height: 28rpx;
	    margin-top: 9rpx;
	}
	.cb_item .words .label{
	    font-size: 20rpx;
	    line-height: 40rpx;
	    margin-top: 20rpx;
	    padding-left: 12rpx;
	    padding-right: 12rpx;
	    background-color: #eee;
	    color: #666;
		border-radius: 8rpx;
	}
	.cb_item .words .wFoot{
	    width: 100%;
	    margin-top: 32rpx;
	    font-size: 24rpx;
	    line-height: 24rpx;
	    justify-content: space-between;
	
	}
	.cb_item .words .wFoot .price{
	
	
	    font-size: 20rpx;
	    line-height: 20rpx;
	    color: #FF1313;
	    font-weight: bold;
	}
	.cb_item .words .wFoot .price .num{
	    font-size: 28rpx;
	    line-height: 28rpx;
	}
	.cb_item .words .wFoot .changeAmount .icon{
	    width: 32rpx;
	    height: 32rpx;
	}
	.cb_item .words .wFoot .changeAmount text{
	   color: #999;
	}
	.itemList .infoItem {
	    border-top: 1rpx #eee solid;
	}
	.itemList .infoItem .iTitle{
	    width: 110rpx;
	}
	/* <!-- 3.配送支付 --> */
	.deliveryPay{
	    padding-top: 20rpx;
	}
	.infoItem.entry{
	    font-size: 24rpx;
	    line-height: 24prx;
	}
	.deliveryPay .infoItem.present {
	    height: 68rpx;
	    font-size: 24rpx;
	    line-height: 24rpx;
	}
	.deliveryPay .infoItem.present .iContent.minus{
	    color: #FF1313;
	}
	.deliveryPay .infoItem.entry {
	    height: 68rpx;
	    justify-content:space-between;
	    
	}
	.deliveryPay .infoItem.entry .iContent .rightArrow{
	    margin-top: 4rpx;
	}
	
	.deliveryPay .infoItem .iTitle{
	    color: #333;
	}
	.deliveryPay .infoItem.pay {
	    margin-top: 20rpx;
	    height: 100rpx;
	    border-top: 1rpx #eee solid;
	}
	.deliveryPay .infoItem.pay .iContent{
	    justify-content: flex-end;
	}
	.deliveryPay .infoItem.pay .iTitle{
	    font-size: 28rpx;
	    line-height: 28rpx;
	    font-weight: bold;
	}
	.deliveryPay .infoItem.pay .price{
	
	
	    font-size: 20rpx;
	    line-height: 20rpx;
	    color: #FF1313;
	    font-weight: bold;
	}
	.deliveryPay .infoItem.pay  .price .num{
	    font-size: 28rpx;
	    line-height: 28rpx;
	}
	/* /    <!-- 4.核销码 --> */
	.comment{
	    height: 130rpx;
	    color: #999;
	    justify-content: space-between;
	    box-sizing: border-box;
	    padding: 0 30rpx;
	}
	.comment .title{
	    font-size: 28rpx;
	    line-height: 28rpx;
	    color: #333;
	  margin-bottom: 20rpx;
	}
	
	
	.unpay_box .btn_box1{
	    height: 100rpx;
	    width:100%;
	   box-shadow: none;
	   background-color: #fff;
	    border-radius: 0;
	    justify-content: flex-end;
	    left: 0;
	    bottom: 0;
	    border-top: 1rpx #eee solid;
	}
	.unpay_box .btn_box1 .btn{
	    width: 160rpx;
	    height: 60rpx;
	    border-radius: 12rpx;
	    background-color: #eee;
	    color: #666;
	    line-height: 60rpx;
	    margin-right:30rpx;
	    font-size: 24rpx;
	    border: 1rpx solid #DDDDDD;
	    background: rgba(238, 238, 238, 0);
	}
	.unpay_box .btn_box1 .buy{
	
	    border: 1rpx solid #fe6903;
	    background-color: #fe6903;
	    color: #fff;
	    
	}
	
	.btn{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #F9600D;
		box-sizing: border-box;
		border: 1rpx #F9600D solid;
		border-radius: 30rpx;
		margin-left: 30rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-bottom: 20rpx;
	}
</style>